<template>
  <el-container>
    <el-header>
       <!-- 头部 -->
      <div class="head-left">
        <i class="el-icon-s-fold"></i>
        <span>意向学员</span>
      </div>
      <section>
        <i class="el-icon-search"></i>
        <i class="el-icon-bell"></i>
        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">{{this.$store.state.loginName}}</el-avatar>
      </section>
      <!--头部结束  -->
    </el-header>
    <el-main>
      <div class="main-top">
        <h3>搜索：</h3>
        <div class="main-search">
          <el-input placeholder="请输入内容" v-model="input1">
            <template slot="prepend">意向学员姓名</template>
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </div>
      <div class="main-content-form">
            <template>
              <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="name" label="姓名" width="70"></el-table-column>
                <el-table-column prop="date" label="日期" width="100"></el-table-column>
                <el-table-column prop="birthday" label="出生日期" width="100"></el-table-column>
                <el-table-column prop="telephone" label="电话" width="120"></el-table-column>
                <el-table-column prop="address" label="咨询校区" width="100"></el-table-column>
                <el-table-column prop="from" label="招生来源" width="100"></el-table-column>
                <el-table-column prop="state" label="跟踪状态" width="100"></el-table-column>
                <el-table-column prop="intention" label="意向程度" width="80"></el-table-column>
                <el-table-column prop="entryTime" label="录入时间" width="100"></el-table-column>
                <el-table-column prop="entryPeople" label="录入人" width="70"></el-table-column>
                <el-table-column prop="clue" label="线索" width="100"></el-table-column>
                <el-table-column prop="operation" label="操作" width="60"></el-table-column>
              </el-table>
            </template>
          </div>
    </el-main>
  </el-container>
</template>
<script>

export default {
  name: "showOff-item4-m1",
  data() {
    return {
      input1: '',
      tableData: [],
    }
  },
  mounted() {
    this.$axios
        .get("/app/mock/264777/example/1598250282731")
        .then((res) => {
          this.tableData = res;
        })
        .catch((err) => console.log(err));
  }
};
</script>


<style scoped>

.el-header{
  display: flex;
  justify-content:space-between;
  align-items: center;
  padding:0 25px
}
.el-header .head-left{
  display: flex;
  align-items: center;
}
.el-header .head-left i{
  font-size:28px;
  color:#686868;
  margin-right:30px
}
.el-header .head-left span{
  font-size:14px;
  color:#686868;
}
.el-header section{
  display: flex;
  align-items: center;
}
.el-header section i{
  font-size:24px;
  color:#7a7a7a;
  margin-right:20px;
}

.el-input {
    width: 400px;
  }
.main-top{
  display: flex;
  align-items: center;
    margin-bottom:20px;
}
.main-top h3{
  font-size:16px;
  font-weight:400;
}
</style>
